<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画图形</title>
</head>
<body>
<canvas id="can1" width="500px" height="400px" style="border: 1px solid #000;" ></canvas>

<script>
    //得到画布
    var canvas1 = document.getElementById('can1');
    // 得到画笔
    var cxt = canvas1.getContext("2d");

    //3.画出直线
    //moveTo设置点位置
    cxt.moveTo(20,20);
    //设置第二个点的位置
    cxt.lineTo(20,90);
    //画出直线。
    cxt.stroke();

    //画出一个填充的三角形--》路径
    //开始新路径
    cxt.beginPath();
    cxt.moveTo(40,20);
    cxt.lineTo(40,90);
    cxt.lineTo(80,90);
    //闭合这个路径
    cxt.closePath();
    //填充
    cxt.fill();

    //画出矩形可以不用路径

    cxt.strokeRect(100,20,50,50);

    //填充矩形
    cxt.fillStyle="#00FF00";
    cxt.fillRect(190,20,50,50);

    //画出图形 arc
    //六个参数arc(x,y,radius,startAngle,endAngle,counterclockwise)
    cxt.beginPath();
    cxt.arc(280,40,20,0,2*Math.PI,true);
    cxt.stroke();

    //画出实心的圆形
    cxt.beginPath();
    cxt.fillStyle="#FF0000";
    cxt.arc(340,40,20,0,2*Math.PI,true);
    cxt.fill();

    //把图片画出(这里有几个频骤)
    //1.创建image对象
    var img1 = new Image();

    //2.指定图片
    img1.src='i/2.jpg'

    //加载完毕后，再绘制图片
    img1.onload = function () {
        cxt.drawImage(img1,20,100,200,150);
    }

    //在画布上写字
    var text ="世界真好";
    //设置字体的大小
    cxt.fillStyle = '#0000ff';
    cxt.font = '30px 黑体';
    cxt.fillText(text,300,200)







</script>

</body>
</html>